<template>
	<view class="bodys">
			<uni-forms  ref="form" :modelValue="formData" validate-trigger="bind">
				<view class="formItem">
					<view>原手机号</view>
					<view><input class="uni-input" v-model="FormData.tel" focus placeholder="请输入原手机号" /></view>
					<view></view>
				</view>
				<view class="formItem">
					<view>新手机号</view>
					<view ><input class="uni-input" v-model="FormData.newtel"  placeholder="请输入新手机号" /></view>
					<view></view>
				</view>
				<view class="formItem">
					<view>验证码</view>
					<view><input class="uni-input" v-model="FormData.captcha"  placeholder="请输入验证码" /></view>
					<view>
						<view v-if="yzFlag"><button class="btn" @click="getCaptcha">获取验证码</button></view>
						<view v-else><button class="btn" disabled="true">{{djs}}</button></view>
					</view>
				</view>

			</uni-forms>
			<button class="subBtn" :style="btnSubStyle" @click="submitEdit">修改手机号</button>
		</view>
		<captcha :showCode="showCode" @completeCaptcha="hkcomplete" ></captcha>
</template>

<script setup>
	import captcha from "@/components/captcha/captcha.vue"
	import {reactive, ref,watch} from "vue"
	import { sendSms,editTel } from "../api/user";
	import {debounce} from "@/utils/debounce.js"
	const FormData = reactive({
		tel:"",
		newtel:"",
		captcha:""
	})
	const btnSubStyle = reactive({})
	watch(FormData,(newVal)=>{
		console.log(newVal,40)
		if(newVal.newtel && newVal.tel && newVal.captcha){
			btnSubStyle.backgroundColor = "orange"
			btnSubStyle.color="#000"
		}else{
			btnSubStyle.backgroundColor = "#bbb"
			btnSubStyle.color="#FFF"
		}
		
	})
	// 用来切换验证码倒计时的 
	const yzFlag =ref(true)
	// 倒计时变量
	const djs = ref(120)
	const showCode = ref(false)
	const getCaptcha = ()=>{
		console.log("zoule ")
		// 这个判断需要对手机号进行正则验证 两个都要验证
		if(FormData.tel && FormData.newtel){
			showCode.value =true
			
		}else{
			uni.showToast({
				icon:"error",
				title:"请先填写手机号"
			})
		}
		
		console.log("走了",showCode.value)
	}
	
	const hkcomplete = (flag)=>{
		console.log(flag,37)
		showCode.value =false
		if(flag){
			// 验证成功 开启验证码倒计时 
			yzFlag.value=false
			djs.value=120
			let inv = setInterval(()=>{
				djs.value =djs.value-1
				if(djs.value===0){
					// 清空定时器
					clearInterval(inv)
					yzFlag.value=true
				}
			},1000)
			// 发送短信
			sendSms({tel:FormData.newtel,event:"edittel"}).then(e=>{
				console.log(e,75)
			})
		}else{
			// 验证失败
			uni.showToast({
				icon:"fail",
				title:"验证失败"
			})
		}
	}
	
	const submitEdit= ()=>{
		if(!FormData.tel || !FormData.newtel || !FormData.captcha){
			uni.showToast({
				icon:"error",
				title:"参数不足"
			})
			return
		}
		uni.showLoading()
		editTel(FormData).then(e=>{
			if(e.code==1){
				uni.showToast({
					icon:"success",
					title:"修改成功",
					success: () => {
						uni.hideLoading()
						uni.navigateTo({
							url:"/pagesC/mine/mine"
						})
					}
				})
			}
		})
	}
</script>

<style scoped>
	.bodys{
		background-color: #fff;
		padding: 10rpx 30rpx;
		font-size: 30rpx;
	}
	.formItem{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		margin-bottom:20rpx;
	}
	.formItem input{
		padding-left: 20rpx;
		height: 80rpx;
		font-size: 28rpx;
	}
	.formItem input .placeholder{
		font-size: 28rpx;
	}
	.btn{
		font-size: 26rpx;
		background-color: orange;
		border: none;
	}
	
	.subBtn{
		border-radius: 50rpx;
		width: 90%;
		border: none;
		background-color: #bbb;
		position: fixed;
		bottom: 80rpx;
		color: #fff;
	}
	.subBtnChecked{
		border-radius: 50rpx;
		width: 90%;
		border: none;
		background-color: orange;
		position: fixed;
		bottom: 80rpx;
		color: #000;
	}
</style>
